<template>
	<view class="page">
		<view class="fiexd-nav">
			<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="rgba(0,0,0,0)" color="#fff"></uni-nav-bar>
		</view>
		<view class="hotel-content">
			<view class="hotel-img">
				<image :src="bannerDate.image" mode=""></image>
			</view>
		</view>
		<view class="box-content">
			<view class="inner-hotel-content">
				<!-- 	<view class="hotel-type">
					<view class="item-type" @click="typeChange(item)" v-for="(item,index) in typeList" :key="index">
						<view :class="type == item.id?'type-name select-style':'type-name'">{{item.name}}</view>
						<view class="bottom-lines" v-if="type == item.id"></view>
					</view>
				</view> -->
				<view class="shaoxuan-hotel">
					<view class="filter-item">
						<view class="address-name" @click="chooseCity">
							{{userLocation.city}}
							{{userLocation.address && userLocation.address.poiName?','+userLocation.address.poiName:''}}
							<text
								v-if="userLocation.specificlocation">{{userLocation.specificlocation && userLocation.specificlocation?','+userLocation.specificlocation:''}}</text>
						</view>
						<view class="loc-icon" @click="choosePopup">
							<image src="https://qiniu-cdn.maeiyun.com/imgs/hotel/dingwei.png" mode=""></image>
						</view>
					</view>
					<view class="filter-item" @click="showCaledar= !showCaledar">
						<view class="time">
							{{initStartDate}} <text>{{beforeweek}}</text>
						</view>
						<view class="time-center"></view>
						<view class="time">
							{{initEndDate}} <text>{{afterweek}}</text>
						</view>
						<view class="all-day">共{{days}}晚</view>
					</view>
					<view class="filter-item">
						<input type="text" placeholder="酒店名称" v-model="queryText" @input="inputCahnge"
							placeholder-class="input-place-style" />
					</view>
				</view>

				<button class="search-btn" @click="toSearchList">
					搜索
				</button>
			</view>
		</view>
		<view class="box-content">
			<view class="list-content" v-if="hotelList.length>0">
				<view class="list-title">附近酒店</view>
				<u-waterfall v-model="hotelList">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" @click.stop="todetail(item)" v-for="(item, index) in leftList"
							:key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.mainImage"
								:index="index"></u-lazy-load>
							<view class="inner-content">
								<view class="demo-title">
									{{item.hotelName}}
								</view>
								<view class="star-lines">
									<uni-rate size="16" readonly active-color="#EF5233" :value="5" />
									<view class="start-text">{{item.avgScore}}</view>
								</view>
								<view class="price-lines">
									<view class="price1"><text>￥</text>{{item.startingPrice}}</view>
									<view class="price2">元<text>起</text></view>
								</view>
							</view>

						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" @click.stop="todetail(item)" v-for="(item, index) in rightList"
							:key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.mainImage"
								:index="index"></u-lazy-load>
							<view class="inner-content">
								<view class="demo-title">
									{{item.hotelName}}
								</view>
								<view class="star-lines">
									<uni-rate size="16" readonly active-color="#EF5233" :value="5" />
									<view class="start-text">{{item.avgScore}}</view>
								</view>
								<view class="price-lines">
									<view class="price1"><text>￥</text>{{item.startingPrice}}</view>
									<view class="price2">元<text>起</text></view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
		<calendar @change="changeDays" :modal="true" :show="showCaledar"></calendar>

		<u-modal v-model="show" @confirm="onConfirm" ref="uModal" :async-close="false" title="提示"
			content="获取您当前位置，展示附近酒店" :show-cancel-button="true" :title-style="{
			'background':'#EAF2FE',
			color:'#2E7EFA',
			'font-weight':600,
			padding:'30rpx 0'
		}" :confirm-style="{
			'background':'#EAF2FE',
		}"></u-modal>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import publicData from './public/public.js'
	import calendar from '../../components/date-picker/date-picker'
	import {
		checkOpenGPSServiceByAndroid
	} from "@/common/js/device.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		components: {
			calendar,
			helangWaterfallList
		},
		mixins: [MescrollMixin],
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			}),
		},
		watch: {
			userLocation: function(newvalue, oldvalue) {
				if (newvalue.address != oldvalue.address) {
					publicData.screeningCondition.cityName = newvalue.cityname
					publicData.screeningCondition.longitude = newvalue.longitude
					publicData.screeningCondition.latitude = newvalue.latitude
					publicData.screeningCondition.pageIndex = 1
					this.hotelList = []
					this.getList(1)
				}
			}
		},
		data() {
			return {
				//初始日期
				initStartDate: '',
				initEndDate: '',
				type: '1,2,3,4,5,6',
				typeList: [{
						id: '1,2,3,4,5,6',
						"name": '经济'
					},
					{
						id: '7',
						"name": '舒适'
					},
					{
						id: '8',
						"name": '高档'
					},
					{
						id: '9',
						"name": '豪华'
					},
				],
				showCaledar: false,
				days: 1,
				isOne: false,
				beforeweek: "今天",
				afterweek: '明天',
				addresInfo: {},
				city: "北京",
				queryText: "",
				bannerDate: {},
				hotelList: [],
				down: {
					auto: false
				},
				isreset: false,
				status: "success",
				params: {

				},

				show: false,

			}
		},
		onLoad() {
			publicData.screeningCondition.queryText = ""
			this.getBanner()
			this.getList(0)
		},
		onShow() {
			publicData.screeningCondition.queryText = ''
			publicData.screeningCondition.pageIndex = 1
			publicData.screeningCondition.sort = '4'
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getBanner() {
				var that = this
				this.request.httpTokenRequest({
					url: "index/getBanner",
					method: "get"
				}, {
					location: 3
				}).then(function(res) {
					if (res.code == 0) {
						that.bannerDate = res.data[0]
					} else {}
				})
			},
			inputCahnge(data) {
				publicData.screeningCondition.queryText = data.detail.value
			},
			typeChange(item) {
				this.type = item.id
				publicData.screeningCondition.hotelStars = item.id
				publicData.screeningCondition.pageIndex = 1
				this.hotelList = []
				this.getList()
			},
			toSearchList() {
				uni.navigateTo({
					url: '/otherpages/hotel/hotelList?queryText=' + this.queryText
				})
			},
			chooseCity() {
				uni.navigateTo({
					url: '/otherpages/chooseAddress/loactionList'
				})
			},
			choosePopup(){
				if (uni.getStorageSync('LOCATION')) {
					this.onConfirm()
				}else{
					this.show = true
				}
			},
			onConfirm() {
				let os = uni.getStorageSync('osName')
				if (os == 'ios') {
					let auth = permision.judgeIosPermission('location')
					if (auth) {
						this.getLocation()
					} else {
						this.default()
					}

				}else {
					this.$util.authorize('android.permission.ACCESS_FINE_LOCATION').then(res => {
						if(res == 1){
							this.getLocation()
						}else {
							this.default()
						}
					})
				}
			},
			default () {
				let that = this
				that.request.httpTokenRequest({
					url: "index/getLocationByIp",
					method: "get"
				}, {}).then(function(res) {
					uni.hideLoading()
					if (res.code == 0) {
						that.request.httpTokenRequest({
							url: "movie/getCityCode",
							method: "get"
						}, {
							name: res.data.city
						}).then(function(data) {
							uni.hideLoading()
							if (data.code == 0) {
								that.$store.commit('changeLocation', {
									cityCode: data.data.cityCode,
									cityName: data.data.cityName,
									regionCode: "",
									regionName: "",
									longitude: res.data.lng,
									latitude: res.data.lat,
								})
								let location = {
									longitude: res.data.lng,
									latitude: res.data.lat,
									province: res.data.province,
									city: res.data.city,
									cityname: res.data.city
								}
								that.$store.commit('changeUserLocation', location)
								publicData.screeningCondition.pageIndex = 1
								that.getList(1)
								uni.hideLoading();
								this.show = false
							} else {}
						})
					} else {}
				})
			},
			getLocation() {
				var that = this
				uni.showLoading({
					title: '定位中'
				});
				this.hotelList = []
				this.$util.getLocation(res=>{
					if(res){
						let location ={}
						let address = res.address
						address.poiName = res.address.street
						if(that.$util.phoneType() == 'ios'){
							location = {
								latitude: res.latitude,
								longitude: res.longitude,
								province: res.address.city || '',
								city: res.address.city || '',
								address: address,
								cityname: res.address.city || ''
							}
						}else{
							location = {
								latitude: res.latitude,
								longitude: res.longitude,
								province: res.address.province || '',
								city: res.address.city || '',
								address: res.address,
								cityname: res.address.city || ''
							}
						}
						
						that.$store.commit('changeUserLocation', location)
						publicData.screeningCondition.pageIndex = 1
						that.getList(1)
						uni.hideLoading();
						that.show = false
					}else{
						that.show = false
						uni.hideLoading();
					}
				})
				uni.hideLoading();
			},
			todetail(item) {
				uni.navigateTo({
					url: '/otherpages/hotel/hotelDetail?id=' + item.hotelID + '&img=' + item.mainImage
				})
			},
			changeDays(data) {
				publicData.selectDate = data.choiceDate
				if (this.isOne) {
					this.initStartDate = data.choiceDate[0].month + '月' + data.choiceDate[0].day + '日'
					this.initEndDate = data.choiceDate[1].month + '月' + data.choiceDate[1].day + '日'
					this.beforeweek = '周' + data.choiceDate[0].week
					this.afterweek = '周' + data.choiceDate[1].week
					this.days = data.dayCount
				} else {
					this.initStartDate = data.choiceDate[0].month + '月' + data.choiceDate[0].day + '日'
					this.initEndDate = data.choiceDate[1].month + '月' + data.choiceDate[1].day + '日'
					this.days = data.dayCount
					this.isOne = true

				}
				publicData.screeningCondition.checkInDate = data.choiceDate[0].year + '-' + data.choiceDate[0].month +
					'-' + data.choiceDate[0].day
				publicData.screeningCondition.checkOutDate = data.choiceDate[1].year + '-' + data.choiceDate[1].month +
					'-' + data.choiceDate[1].day
				publicData.screeningCondition.days = data.dayCount
			},
			getList(type) {
				publicData.screeningCondition.cityName = this.userLocation.cityname
				publicData.screeningCondition.longitude = this.userLocation.longitude
				publicData.screeningCondition.latitude = this.userLocation.latitude
				this.request.httpTokenRequest({
					url: "hotel/index",
					method: 'post'
				}, publicData.screeningCondition).then(res => {
					if (res.code == 0) {
						this.hotelList = res.data.data.hotelList;

					}
				}, error => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F5F7F8;
		height: 100vh;
	}

	.fiexd-nav {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		right: 0;
		z-index: 10;
	}

	.hotel-img {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.inner-hotel-content {
		background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/h-bg.png')no-repeat;
		background-size: 100% 100%;
		height: 558rpx;
		box-sizing: border-box;
		padding: 27rpx 33rpx;

		.hotel-type {
			display: flex;
			align-items: flex-end;
			justify-content: space-around;

			.item-type {
				width: 100rpx;
				height: 51rpx;
				line-height: 51rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				text-align: center;

				.type-name {
					position: relative;
					z-index: 10;
				}

				.select-style {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #EF5233;
				}

				.bottom-lines {
					width: 100rpx;
					height: 20rpx;
					background: #F3C4BB;
					border-radius: 14rpx;
					position: relative;
					top: -16rpx;
				}
			}
		}

		//
		.shaoxuan-hotel {
			margin-top: 8rpx;

			.filter-item {
				display: flex;
				align-items: center;
				height: 109rpx;
				line-height: 109rpx;
				border-bottom: 1rpx solid #DADBDB;

				.address-name {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					max-width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.loc-icon {
					margin-left: auto;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.time {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #000000;

					text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #979797;
						margin-left: 9rpx;
					}
				}

				.time-center {
					width: 34rpx;
					height: 4rpx;
					background-color: #979797;
					border-radius: 90px;
					margin: 0 22rpx;
				}

				.all-day {
					margin-left: auto;
				}

				.input-place-style {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #B5B6B6;
				}
			}
		}

		//
		button::after {
			border: 0;
		}

		.search-btn {
			margin-top: 30rpx;
			width: 630rpx;
			height: 80rpx;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/search-btn.png')no-repeat;
			background-size: 100% 100%;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;

		}

	}

	//
	.list-content {
		background-color: #FFFFFF;
		border-radius: 14rpx;
		margin-top: 20rpx;

		.list-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
			line-height: 48rpx;
			padding: 30rpx 30rpx;
			padding-bottom: 0;
		}

		.item {}

		.title {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2A2B2E;
			line-height: 40rpx;
			margin-top: 15rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;

		}

		.juli-text {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
			position: absolute;
			bottom: 16rpx;
			left: 20rpx;
			right: 0;
			display: flex;
			align-items: center;

			image {
				width: 17rpx;
				height: 21rpx;
				margin-right: 9rpx;
			}
		}

		.item-list {
			// display: flex;
			// align-items: flex-start;
			// flex-wrap: wrap;
			// justify-content: space-between;
			column-count: 2; //想要排成的列数
			column-gap: 20rpx;
		}

		.item {
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			overflow: hidden;
			font-size: 0;
			margin-bottom: 21rpx;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.inner-item {
			padding: 0 11rpx;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			border: 1rpx solid #EFEFEF;
			border-top: 0;
			padding-bottom: 20rpx;

			.title {
				margin: 0;
			}
		}

		.star-lines {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 600;
			color: #EF5233;
			line-height: 33rpx;
			margin-top: 10rpx;

			.start-text {
				margin-left: 14rpx;
			}
		}

		.price-lines {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 13rpx;

			.price1 {
				font-size: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #EF5233;
				line-height: 33rpx;

				text {
					font-size: $uni-font-size-base;
					font-weight: normal;
				}
			}

			.price2 {
				font-size: $uni-font-size-sm;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #EF5233;
				line-height: 30rpx;

				text {
					color: #656667;
				}
			}
		}
	}

	.demo-warter {
		border-radius: 8rpx;
		margin: 5rpx;
		background-color: #ffffff;
		padding: 10rpx;
		position: relative;
	}

	.inner-content {
		border: 1rpx solid #EFEFEF;
		border-top: 0;
		padding: 11rpx;
		margin-top: -4rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.star-lines {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 600;
		color: #EF5233;
		line-height: 33rpx;
		margin-top: 10rpx;

		.start-text {
			margin-left: 14rpx;
		}
	}

	.price-lines {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 13rpx;

		.price1 {
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #EF5233;
			line-height: 33rpx;

			text {
				font-size: $uni-font-size-base;
				font-weight: normal;
			}
		}

		.price2 {
			font-size: $uni-font-size-sm;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #EF5233;
			line-height: 30rpx;

			text {
				color: #656667;
			}
		}
	}
</style>